<template>
  <div id="wrapper">
    <h1 class="headline">
      <span class="accent">演示</span> 可通信子窗口
    </h1>
    <div class="description">
      本页面演示一个可通信子窗口，接收来自主窗口的消息，发送消息给主窗口。
    </div>
    <div class="form">
      <a-button type="primary" @click="sendMessage()">发送消息给主窗口</a-button>
    </div>
  </div>
</template>

<script setup>
import { ipcApiRoute } from "@/api/main";
import { ipc, isEE } from "@/utils/ipcRenderer";
import { message } from "ant-design-vue";
import {onMounted } from 'vue';


onMounted(() => { 
  isEE ? init() : message.info("Electron环境下，才有消息监听效果");
})

function init() {
  console.log(isEE, "开始监听主窗体来的消息");
  // 监听窗口发来的消息
  ipc.removeAllListeners(ipcApiRoute.sms.mainToSub);
  ipc.on(ipcApiRoute.sms.mainToSub, (event, arg) => {
      message.success(arg, 8);
  })  
}

async function sendMessage() {
  
  const params = {
    receiver: 'main',
    content: '我是来自通信子窗口的消息'
  }
  ipc.invoke(ipcApiRoute.sms.subToMain, params).then((ret) => {
     console.log("ret",ret);
     message.info("请到主窗体查看信息");
  });
}
</script>

<style lang="less" scoped>
.headline {
  font-size: 22px;
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: -1.2px;
  margin: 10px auto 20px;
}

html:not(.dark) .accent {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
  background-clip: text;
  letter-spacing: 1.5px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.description {
  line-height: 1.5;
  font-size: 16px;
  margin: 10px auto 15px;
}

.form{
  margin-top: 40px;
}
</style>